<template>
  <view>
    <view class="s-body chat-con">
      <view>
        <scroll-view class="maxh"
                     :scroll-y="true"
                     :scroll-top="scrollY">
          <chat-list :historyTextList="historyTextList"
                     :loading="loading"
                     :sparkResult="sparkResult"
                     type="chat"
                     @refsh="refsh"></chat-list>
        </scroll-view>
      </view>
      <view>
        <view>
          <view class="zl-flex zl-row-between">
            <textarea auto-height="true"
                      @input="changeInput"
                      @confirm="getWss"
                      confirm-type="send"
                      v-model="TEXT"
                      cursor-spacing="160"
                      placeholder="写下你想问的..."
                      maxlength="9000" />
            <image src="../../static/ai/send.png"
                   @click="getWss"
                   style="width: 55rpx;height: 55rpx;"
                   mode="scaleToFill" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ChatList from "@/components/chat_list.vue";
export default {
  data () {
    return {
      tempMsg: null,
      scrollY: 99999,
      loadingData: false,
      loading: false,
      topTabh: 0,
      TEXT: '',
      sparkResult: '',
      historyTextList: [], // 历史会话信息，由于最大token12000,可以结合实际使用，进行移出
      tempRes: '', // 临时答复保存
      lock: false, // 锁定
      balanceInfo: {},
      storeInfo: {},
    }
  },
  onLoad (options) {
    const systemInfo = uni.getSystemInfoSync();
    this.topTabh = systemInfo.statusBarHeight * 2 + 84;
    this.getassetamount()
  },
  onNavigationBarButtonTap (e) {
    uni.navigateTo({
      url: '/pages/ai_chat_record/ai_chat_record'
    })
  },
  components: {
    ChatList
  },
  onBackPress (options) {
    uni.$emit('updateUser')
  },
  methods: {
    goBack () {
      uni.navigateBack()
    },
    refsh (d) {
      if (this.lock) {
        return this.utils.toast('请等待上个问题回答完成');
      }

      this.text = d.messageText
      this.getWss()
    },
    changeInput () {
      if (this.TEXT.indexOf('\n') > -1) {
        this.TEXT = this.TEXT.replaceAll('\n', '')
      }
    },
    async sendToSpark () {
      if (this.TEXT === '') {
        return uni.showToast({
          title: '请输入内容',
          icon: 'none'
        })
      }
      if (this.lock) {
        return uni.showToast({
          title: '请等待上个问题回答完成',
          icon: 'none'
        })
      }
      this.historyTextList.push({
        content: this.TEXT,
        role: 'user'
      })

      this.lock = true
      this.tempRes = "";
      this.sparkResult = "";
      let par = {
        sessionId: this.sessionId ? this.sessionId : '',
        templateId: 0,
        question: this.TEXT,
      }
      uni.showLoading({
        title: '加载中'
      });
      this.api.aichat.qwen(par).then(res => {
        uni.hideLoading();
        if (res.code === 0) {
          this.sessionId = res.data.sessionId;
          this.historyTextList.push({
            content: res.data.answer,
            role: 'assistant'
          })
          this.$nextTick(() => {
            uni.pageScrollTo({
              scrollTop: 8000000000, //滚动到页面的目标位置（单位px）
              duration: 200 //滚动动画的时长，默认300ms，单位 ms
            })
          });
          this.lock = false
          this.TEXT = ''
        } else {
          this.lock = false
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
    // 获取账号资源总计
    getassetamount () {
      this.api.account.getassetamount().then(res => {
        if (res.code === 0) {
          this.balanceInfo = res.data;
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg(err);
        // this.$util.msg('请检查网络连接！');
      })
    },
    // getuserInfo () {

    //   this.$u.api.accoutDetail({
    //     id: this.storeInfo.accountID
    //   }).then(res => {

    //     if (res.flag) {
    //       // console.log(res.data);
    //       this.storeInfo = res.data
    //       // console.log(this.storeInfo);
    //       uni.setStorageSync('storeInfo', res.data);

    //     } else {
    //       this.$util.msg(res.msg)
    //     }
    //     this.showView = true;
    //   }).catch(err => {
    //     console.log(err, '报错');
    //     this.$util.msg('请检查网络连接！');
    //     // uni.reLaunch({
    //     // 	url: '/pages/login/login'
    //     // })
    //   })
    // },
    // 鉴权
    getWss () {
      if (!this.balanceInfo.endTime) {
        return this.$util.msg('会员已到期,请续费')
      }
      this.sendToSpark()
    },

  }
}
</script>


<style scoped lang="scss">
.top-box {
  background-color: #763ac9;
  position: relative;

  .top {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 84upx;
    padding: 0 30upx;
    z-index: 9999;

    .backIcon {
      width: 20upx;
      height: 35upx;
    }

    .top-title {
      width: 380rpx;
    }

    .btn {
      width: 155rpx;
      height: 50rpx;

      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}

.chat-con {
  display: flex;
  flex-direction: column;
  height: 100%;

  & > view {
    &:nth-child(1) {
      flex: 1;
      overflow: hidden;
    }

    &:nth-child(2) {
      position: fixed;
      bottom: 0rpx;
      left: 0;
      display: flex;
      align-items: center;
      width: 100vw;
      // height: 128rpx;
      padding: 30rpx;
      background: #ffffff;

      & > view {
        // height: 87rpx;

        margin: 0 auto 20rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;
        border-radius: 40rpx;
        border: 1rpx solid #567aed;

        &:nth-child(1) {
          flex: 1;

          input {
            padding-top: 20rpx;
            padding-bottom: 20rpx;
            width: 100%;
          }

          textarea {
            padding: 20rpx 0;
            width: 88%;
          }
        }

        &:nth-child(2) {
          display: flex;
          align-items: center;
          justify-content: center;
          padding-left: 10rpx;

          text {
            color: #aabcf6;
            font-size: 38rpx;
          }
        }
      }
    }
  }
}

.group-btn {
  font-size: 36rpx;
  color: #101012;
}

.cate-con {
  padding: 25rpx;

  & > view {
    &:nth-child(1) {
      height: 96rpx;
      background: #ffffff;
      border-radius: 10rpx;
      border: 1rpx solid #d4d4d4;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #101012;
    }

    &:nth-child(2) {
      margin-top: 30rpx;

      & > view {
        display: flex;
        height: 76rpx;
        border-radius: 10rpx;
        border: 1rpx solid #d4d4d4;
        align-items: center;
        padding-left: 22rpx;
        padding-right: 20rpx;
        margin-bottom: 20rpx;

        &.active {
          background: #f8faff;
          border: 1rpx solid #577bed;
          color: #577bed;
        }

        & > view {
          &:nth-child(1) {
            text {
              font-size: 28rpx;
            }
          }

          &:nth-child(2) {
            // @include textOverflow();
            flex: 1;
            margin-left: 14rpx;
            margin-right: 14rpx;
          }

          &:nth-child(3) {
            text {
              font-size: 26rpx;
            }
          }
        }
      }
    }
  }
}

.add-cate-inp {
  padding: 40rpx 30rpx;

  input {
    height: 84rpx;
    line-height: 84rpx;
    background: #f6f6f6;
    border-radius: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
  }
}
</style>